<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">报表管理 > <span class="size">运营报表</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10">
      <div class="d_f j_c_s_b a_i_c">
        <h4>运营报表查询结果</h4>
        <el-button @click="derive">导出</el-button>
      </div>
      <div class="w_100 headTips d_f a_i_c m_t_30">
        <div class="line"></div>
        融资批量业务审批耗时统计
        <div class="d_f auto">
          <div v-for="(item, index) in list1" :key="index" class="product" @click="change(item)">{{ item.productName }}
          </div>
        </div>
      </div>
      <div class="tabs">
        <mytable :isHight="false" :fields="tableFields" :isCenter="false" :handle="false" :isPaginationShow="false"
          :defaultList="records1" ref="tableRef" :values="values" class="m_t_10" :isTotal="true" :isSelection="false">
          <template v-slot:timeoutProjectCount="{ row, index }">
            <span class="timeoutProjectCount" @click="detail(row, 2)" v-if="index < records1.length - 1">{{
              row.timeoutProjectCount }}</span>
            <span v-else>{{ row.timeoutProjectCount }}</span>
          </template>
        </mytable>
      </div>
      <div class="w_100 headTips d_f a_i_c m_t_30">
        <div class="line"></div>
        融资单笔业务审批耗时统计
        <div class="d_f auto">
          <div v-for="(item, index) in list2" :key="index" class="product" @click="change(item)">{{ item.productName }}
          </div>
        </div>
      </div>
      <div class="tabs">
        <mytable :isHight="false" :fields="tableFields" :isCenter="false" :handle="false" :isTotal="true" :isPaginationShow="false"
          :defaultList="records2" ref="tableRef" :values="values" class="m_t_10" :isSelection="false">
          <template v-slot:timeoutProjectCount="{ row, index }">
            <span class="timeoutProjectCount" @click="detail(row, 1)" v-if="index < records2.length - 1">{{
              row.timeoutProjectCount }}</span>
            <span v-else>{{ row.timeoutProjectCount }}</span>
          </template>
        </mytable>
      </div>
      <div class="w_100 headTips d_f a_i_c m_t_30">
        <div class="line"></div>
        非融资批量业务审批耗时统计
        <div class="d_f auto">
          <div v-for="(item, index) in list3" :key="index" class="product" @click="change(item)">{{ item.productName }}
          </div>
        </div>
      </div>
      <div class="tabs">
        <mytable :isHight="false" :fields="tableFields" :isCenter="false" :handle="false" :isTotal="true" :isPaginationShow="false"
          :defaultList="records3" ref="tableRef" :values="values" class="m_t_10" :isSelection="false">
          <template v-slot:timeoutProjectCount="{ row, index }">
            <span class="timeoutProjectCount" @click="detail(row, 4)" v-if="index < records3.length - 1">{{
              row.timeoutProjectCount }}</span>
            <span v-else>{{ row.timeoutProjectCount }}</span>
          </template>
        </mytable>
      </div>
      <div class="w_100 headTips d_f a_i_c m_t_30">
        <div class="line"></div>
        非融资单笔业务审批耗时统计
        <div class="d_f auto">
          <div v-for="(item, index) in list4" :key="index" class="product" @click="change(item)">{{ item.productName }}
          </div>
        </div>
      </div>
      <div class="tabs">
        <mytable :isHight="false" :fields="tableFields" :isCenter="false" :handle="false" :isTotal="true" :isPaginationShow="false"
          :defaultList="records4" ref="tableRef" :values="values" class="m_t_10" :isSelection="false">
          <template v-slot:timeoutProjectCount="{ row, index }">
            <span class="timeoutProjectCount" @click="detail(row, 3)" v-if="index < records4.length - 1">{{
              row.timeoutProjectCount }}</span>
            <span v-else>{{ row.timeoutProjectCount }}</span>
          </template>
        </mytable>
      </div>
    </div>
    <el-dialog v-model="show" :title="title" width="1000" :before-close="handleClose">
      <mytable :isHight="false" :fields="timesFields"  :serial="false" :isPaginationShow="false"
        :defaultList="timeRecords" :values="{}" :handle="false" class="m_t_16" :isSelection="false">
      </mytable>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { copy, derivation } from '../../../utils/date'
import { statOperating, listProduct, operatingStatTimeout, operatingExportOperating } from '../../../api/report'
import { operateType } from '../../../type/report';
import { Search } from '@element-plus/icons-vue'
import { number } from 'echarts';
const values = {
  productId: '',
  productCategory: '',
  start: '',
  finish: '',
  nodeId: '',
  range: [],
}
export default defineComponent({
  name: '',
  setup() {
    const data: operateType = reactive({
      values: copy(values),
      fields: [
        {
          label: "产品名称",
          prop: 'productId',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'productName',
          bindValue: 'productId',
          labelWidth: '70px'
        },
        {
          label: "产品类型",
          prop: 'productCategory',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          labelWidth: '70px'
        },
        {
          label: "起止时间",
          prop: 'range',
          placeholder: '请选择',
          type: 'range',
          labelWidth: '70px',
        },
        {
          prop: 'button'
        }
      ],
      options: {
        productCategory: [
          {
            name: '融资单笔',
            id: 1
          },
          {
            name: '融资批量',
            id: 2
          },
          {
            name: '非融单笔',
            id: 3
          },
          {
            name: '非融批量',
            id: 4
          },
        ],
        productId: [],
      },
      tableFields: [
        {
          label: '任务节点',
          prop: 'nodeName',
        },
        {
          label: '待处理项目数',
          prop: 'waitingProjectCount',
        },
        {
          label: '已处理项目数',
          prop: 'processedProjectCount',
        },
        {
          label: '规定完成时间（天）',
          prop: 'planToCompleteDay',
        },
        {
          label: '平均耗时',
          prop: 'averageCost',
        },
        {
          label: '最长耗时',
          prop: 'longestCost',
        },
        {
          label: '最短耗时',
          prop: 'fastCost',
        },
        {
          label: '超时项目数',
          prop: 'timeoutProjectCount',
        },
        {
          label: '超时处理比例',
          prop: 'timeoutPercent',
        },
      ],
      records1: [],
      records2: [],
      records3: [],
      records4: [],
      show: false,
      timesFields: [
        {
          label: '项目编号',
          prop: 'projectNo',
          width: '250px'
        },
        {
          label: '企业名称',
          prop: 'customerName',
          width: '100px'
        },
        {
          label: '该流程审批耗时（天）',
          prop: 'approveCost',
          width: '150px'
        },
        // {
        //   label: '超时处理期数',
        //   prop: 'timeoutCount',
        //   width: '100px'
        // },
        {
          label: '超时天数',
          prop: 'timeoutDay',
          width: '100px'
        },
        {
          label: '超时节点审批人',
          prop: 'timeoutAuditor',
          width: '150px'
        },
      ],
      timeRecords: [],
      title: '',
      list1: [],
      list2: [],
      list3: [],
      list4: [],
    })
    onBeforeMount(() => {
      methods.getData()
      methods.getList()
    })
    const tableRef = ref()
    const methods = {
      getData() {
        statOperating(data.values).then((res: any) => {
          data.records1 = res.resultMap[2] || []
          data.records2 = res.resultMap[1] || []
          data.records3 = res.resultMap[4] || []
          data.records4 = res.resultMap[3] || []
          data.records1.map(item=>{
            for(let i in item){
              if((item[i]==''||item[i]==null)&&item[i]!=0){
              item[i]='-'
              }
            }
          })
          data.records2.map(item=>{
           
            for(let i in item){
              if((item[i]==''||item[i]==null)&&item[i]!=0){
              item[i]='-'
              }
            }
          })
          console.log(data.records2);
          data.records3.map(item=>{
            for(let i in item){
              if((item[i]==''||item[i]==null)&&item[i]!=0){
              item[i]='-'
              }
            }
          })
          data.records4.map(item=>{
            for(let i in item){
              if((item[i]==''||item[i]==null)&&item[i]!=0){
              item[i]='-'
              }
            }
          })
        })
      },
      getList() {
        listProduct({}).then((res: any) => {
          data.options.productId = res.products
          data.list1 = res.products.filter((item: any) => {
            return item.productCategory == 2
          })
          data.list2 = res.products.filter((item: any) => {
            return item.productCategory == 1
          })
          data.list3 = res.products.filter((item: any) => {
            return item.productCategory == 4
          })
          data.list4 = res.products.filter((item: any) => {
            return item.productCategory == 3
          })
        })
      },
      //表格数据重置
      resetting() {
        data.values = copy(values)
        methods.getData()
      },
      //搜索
      searchFor() {
        if (data.values.range) {
          if (data.values.range.length > 0) {
            data.values.start = data.values.range[0]
            data.values.finish = data.values.range[1]
          } else {
            data.values.start = data.values.finish = ''
          }
        } else {
          data.values.start = data.values.finish = ''
        }
        methods.getData()
      },
      detail(row: any, num: number) {
        operatingStatTimeout({ nodeId: row.nodeId, productCategory: num,productId:data.values.productId }).then((res: any) => {
          data.timeRecords = res
          data.title = `超时-${row.nodeName}（${res.length}条）`
          data.show = true
        })
      },
      handleClose() {
        data.timeRecords = []
        data.show = false
      },
      change(item: any) {
        data.values.productId = item.productId
        methods.getData()
      },
      //导出运营报表
      derive() {
        operatingExportOperating(data.values).then((res: any) => {
          derivation(res, '运营报表')
        })
      }
    }
    return {
      ...toRefs(data),
      ...methods, tableRef, Search
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);

  .tabs {
    background: rgba(24, 120, 255, 0.02);
    padding: 24px;
  }

  .timeoutProjectCount {
    color: #1878FF;
    cursor: pointer;
  }

  .product {
    background: rgba(24, 120, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    color: #1878FF;
    font-size: 12px;
    cursor: pointer;
    margin-left: 10px;
    white-space: nowrap;
  }
}

.auto {
  width: 86%;
  overflow-x: auto;
}
</style>